<section class="content-header">
    <h1>
        <span>用户管理</span>
        <small>新增</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="${basePath}"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">系统管理</a></li>
        <li class="active">用户管理</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-info">
            <form id="user-form" name="user-form" class="form-horizontal">
                <input type="hidden" name="id">
                <input type="hidden" name="version">
                <input type="hidden" name="isSuperAdmin">
                <input type="hidden" name="createDateTime" data-flag="date" data-format="yyyy-MM-dd HH:mm:ss">
                <input type="hidden" name="deleted">
                <input type='hidden' value='${CSRFToken}' id='csrftoken'>
                <input type="hidden" id="avatarId" name="avatarId">
                <div class="box-header">
                    <div class="col-xs-12 text-center">
                       <div class="avatar-container text-center">
                           <img src="${basePath}/resources/common/images/avatar.jpg" id="avatarImg" class="avatar-img"/>
                       </div>
                        <div>
                           <button type="button" class="btn btn-sm btn-camera" data-btn-type="upload" ><i class="fa fa-camera">&nbsp;上传/更改头像</i></button>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birthday" class="col-sm-3 control-label">出生日期</label>
                            <div class="input-group date col-sm-8">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control" data-flag="datepicker" data-format="yyyy-MM-dd"
                                       id="birthday" name="birthday"
                                       placeholder="出生日期">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="telphone" class="col-sm-3 control-label">座机</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="telphone" name="telphone" placeholder="座机">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-3 control-label">Email</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别</label>

                            <div class="col-sm-8">
                                <label class="control-label"> <input type="radio" name="sex" data-flag="icheck"
                                                                     class="flat-red" value="1"> 男
                                </label> &nbsp; <label class="control-label"> <input type="radio" name="sex"
                                                                                     data-flag="icheck" class="flat-red"
                                                                                     value="0"> 女
                            </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="loginName" class="col-sm-3 control-label">登录名</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="loginName" name="loginName"
                                       placeholder="登录名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mobile" class="col-sm-3 control-label">手机</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手机">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="qq" class="col-sm-3 control-label">QQ</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="qq" name="qq" placeholder="QQ">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer text-right">
                    <!--以下两种方式提交验证,根据所需选择-->
                    <button type="button" class="btn btn-default" data-btn-type="cancel" >取消 </button>
                    <button type="submit" class="btn btn-primary" data-btn-type="save">提交</button>
                </div>
                <!-- /.box-footer -->
            </form>
            </div>
        </div>
    </div>
</section>
</div>
<script>
    //tableId,queryId,conditionContainer
    var form = null;
    var id = "${id?default(0)}";
    $(function () {
        //初始化控件
        form = $("#user-form").form();
        //数据校验
        $("#user-form").bootstrapValidator({
            message: '请输入有效值',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function (validator, userform, submitButton) {
                modals.confirm('确认保存？', function () {
                    //Save Data，对应'submit-提交'
                    var params = form.getFormSimpleData();
                    ajaxPost(basePath + '/user/save', params, function (data, status) {
                        if (data.success) {
                            if (id != "0") {//更新
                               gotolist(id);
                            } else {//新增
                                //modals.info("数据保存成功");
                                gotolist();
                            }
                        }
                    });
                });
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '请输入姓名'
                        }
                    }
                },
                sex: {
                    validators: {
                        notEmpty: {
                            message: '请选择性别'
                        }
                    }
                },
                birthday: {
                    validators: {
                        notEmpty: {
                            message: '请输入出生日期'
                        },
                        date: {
                            format: $(this).data("format"),
                            message: '请输入有效日期'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '请输入登录名'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '请输入邮件',
                        },
                        emailAddress: {
                            message: '非法的邮件格式',
                        }

                    }
                }
            }
        });

        form.initComponent();
        //回填id
        if (id != "0") {
            ajaxPost(basePath + "/user/get", {id: id}, function (data) {
                form.initFormData(data);
                $(".content-header h1 small").html("编辑用户【"+data.name+"】");
                //头像回填
                ajaxPost(basePath+"/user/getAvatar",{userId:id},function(result){
                    setAvatar(result.id,result.src,false);
                })
            })
        }

        //cancel
        $("[data-btn-type='cancel']").click(function () {
           gotolist();
        })

        $("[data-btn-type='upload']").click(function(){
            uploadAvatar();
        })
    });

    function gotolist(id){
        window.loadPage(basePath+"/user/page/list?id="+id);
    }

    var avatarWin="avatarWin";
    function uploadAvatar(){
        modals.openWin({
            winId:avatarWin,
            title:'上传头像',
            width:'700px',
            url:basePath+"/user/avatar?userId="+id
        });
    }


    function resetForm() {
        form.clearForm();
        $("#user-form").data('bootstrapValidator').resetForm();
    }

    function setAvatar(avatar_id,avatar_url,isAdd){
        $("#avatarImg").attr("src",basePath+avatar_url);
        //如果是新增 绑定用户
        if(isAdd){
            $("#avatarId").val(avatar_id);
        }else{
            $("#avatarId").val(null);
        }
    }
</script>
